<!-- 商家提号首页 -->
<template>
  <div class="app-container customTabNew">
    <!-- <div class="tabs ">
      <el-radio-group v-model="actived" @change="tabChange">
        <el-radio-button :label="tab.value" v-for="tab in tabList" :key="tab.value">{{ tab.name }}</el-radio-button>
      </el-radio-group>
    </div> -->

    <div class="card" style="margin-top: 10px;">
      <div>
        <subtit title="勾选我的商家">
          <span style="padding-left: 15px;color: #999;">
            当前已有{{ daishouwodeList.length || 0 }}位商家勾选了您的商品
          </span>
           <el-button type="text" @click="openDialog">设置折扣</el-button>
        </subtit>
       
      </div>
      <div class="daishou-list">
        <vue-seamless-scroll :data="daishouwodeList" :class-option="defaultOption">
          <div class="scroll_box flex">
            <div class="daishou-item flex" v-for="item in daishouwodeList" :key="item.tenantId">
              <img :src="item.avatar" @error="handleImageError" alt="">
              <span>{{ item.tenantName }}</span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="card flex card2">
      <div class="flex">


        <div class="rgbox" style="margin-right: 16px;">
          <div class="flex">
            <div class="tit">分销排行榜</div>
            <div class="flex flex-row">
              <!-- <div class="timer">2025-08-25</div> -->
              <div @click="getrankSale" class="refreshImg" :class="{ loading: refreshLoadingSale }">刷新<img
                  class="refresh-icon" src="@/assets/img/youzhishangjia/refresh.png" alt=""></div>
            </div>
          </div>
          <div class="paihang_list">
            <div>
              <div class="paihang_item flex" v-for="(item, i) in tihaoPaihang" :key="i">
                <div class="flex alc">
                  <img class="numimg"
                    :src="'https://imgage.maimaihao.com/yuduhulian/erp/static/icon/sort-' + (i + 1) + '.png'" alt="" >
                  <img class="icon" :src="item.avatar" alt="" @error="handleImageError">
                  <div class="name" v-if="(item.tenantName && item.tenantName.length < 9)">{{ item.tenantName }}</div>
                  <div class="name" v-else>
                    <el-tooltip class="item" :content="item.tenantName" placement="top">
                      <div class="name">{{ item.tenantName || '' }}</div>
                    </el-tooltip>
                  </div>
                </div>

                <!-- <span>帮销
                  <span style="font-size: 18px;color: #D22F2F;">{{ item.num }}</span>
                  单</span> -->
                <span class="lianxi" @click="openIM(item)">联系TA</span>
              </div>
            </div>

          </div>
        </div>
        <div class="rgbox">
          <div class="flex">
            <div class="tit">供货排行榜</div>
            <div class="flex flex-row">
              <!-- <div class="timer">2025-08-25</div> -->
              <div @click="getrankSupply" class="refreshImg" :class="{ loading: refreshLoadingSupply }">刷新<img
                  class="refresh-icon" src="@/assets/img/youzhishangjia/refresh.png" alt=""></div>
            </div>
          </div>
          <div class="paihang_list">
            <!-- <vue-seamless-scroll :data="gonghuoPaihang" :class-option="defaultOption2">
            </vue-seamless-scroll> -->
            <div>
              <div class="paihang_item flex" v-for="(item, i) in gonghuoPaihang" :key="i">
                <div class="flex alc">
                  <img class="numimg"
                    :src="'https://imgage.maimaihao.com/yuduhulian/erp/static/icon/sort-' + (i + 1) + '.png'" alt="" >
                  <img class="icon" :src="item.avatar" alt="" @error="handleImageError">
                  <div class="name" v-if="(item.tenantName && item.tenantName.length < 9)">{{ item.tenantName }}</div>
                  <div class="name" v-else>
                    <el-tooltip class="item" :content="item.tenantName" placement="top">
                      <div class="name">{{ item.tenantName || '' }}</div>
                    </el-tooltip>
                  </div>
                </div>
                <!-- <span>供货
                  <span style="font-size: 18px;color: #D22F2F;">{{ item.num }}</span>
                  单</span> -->
                <span class="lianxi" @click="openIM(item)">联系TA</span>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="left">
        <div class="tihao-box flex">
          <div class="shangjiatihao">
            <div class="flex-l-title">
              <img class="flex-l-title-bg" src="../../../../assets/img/yudoushangjia-title.png" alt="">
              <div> 商家提号流程 <img class="tips-img" src="../../../../assets/img/yudouhulian-tips.png" alt=""></div>
            </div>
            <div class="flex flexbox">
              <div class="flex-l">
                <div>
                  <img class="flex-l-cont-bg" src="../../../../assets/img/yudoushangjia-left.png" alt="">
                </div>
              </div>
              <div class="flex-r">
                <img class="flex-r-cont-bg" src="../../../../assets/img/yudoushangjia-right.png" alt="">
              </div>
            </div>
            <el-button class="btn" type="primary" @click="goLink('/huoyuan/goodsPool')">商家提号</el-button>
          </div>
          <div class="peifushenqing">
             <div class="flex-l-title">
              <img class="flex-l-title-bg" src="../../../../assets/img/yudoushangjia-title.png" alt="">
              <div> 赔付申请流程 <img class="tips-img" src="../../../../assets/img/yudouhulian-tips.png" alt=""></div>
            </div>
            <div class="flex flexbox">
              <div class="flex-l">
                <div>
                  <img class="flex-l-cont-bg" src="../../../../assets/img/yudoupeifu.png" alt="">
                </div>
              </div>
              <div class="flex-r">
                <img class="flex-r-cont-bg" src="../../../../assets/img/yudoupeifu-r.png" alt="">
              </div>
            </div>
            <el-button class="btn" type="primary" @click="goPeifu">赔付申请</el-button>
          </div>
        </div>
        <div class="huti-tongji ">
          <div class="tit">
            互提订单
          </div>

          <div class="inner flex alc">
            <div class="huti-item" @click="goLink('/tenantOrders/caigoudingdan')">
              <div>
                <span class="num" style="color: #24a813;">{{ hutiData.saleNum }}</span>单
              </div>
              <div>
                <el-popover placement="top-start" title="" width="200" trigger="hover" content="采购订单的数量">
                  <span slot="reference" class="name flex alc">
                    <span>我买的</span> <i class="el-icon-info"></i>
                  </span>
                </el-popover>
              </div>
            </div>
            <div class="huti-item" @click="goLink('/tenantOrders/SaleOrderPage')">
              <div>
                <span class="num" style="color: #24a813;">{{ hutiData.supplyNum }}</span>单
              </div>
              <div>
                <el-popover placement="top-start" title="" width="200" trigger="hover" content="同行提号的订单数量">
                  <span slot="reference" class="name flex alc">
                    <span>我卖的</span> <i class="el-icon-info"></i>
                  </span>
                </el-popover>
              </div>
            </div>
            <div class="huti-item" @click="goLink('/tenantOrders/peifubuyer')">
              <div>
                <span class="num" style="color: #eb8200;">{{ hutiData.applyNum }}</span>单
              </div>
              <div>
                <el-popover placement="top-start" title="" width="200" trigger="hover" content="采购订单供货商赔付给我的订单数量">
                  <span slot="reference" class="name flex alc">
                    <span>赔付我的</span> <i class="el-icon-info"></i>
                  </span>
                </el-popover>
              </div>
            </div>
            <div class="huti-item" @click="goLink('/tenantOrders/peifusale')">
              <div>
                <span class="num" style="color: #e92424;">{{ hutiData.claimNum }}</span>单
              </div>
              <div>
                <el-popover placement="top-start" title="" width="200" trigger="hover" content="同行提号订单我赔付的数量">
                  <span slot="reference" class="name flex alc">
                    <span>我赔付的</span> <i class="el-icon-info"></i>
                  </span>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
        <div class="huti-tongji">
          <div class="tit">
            六大货源优势
          </div>
          <div class="grid">
            <div class="grid-item">
              <img src="../../../../assets/img/yikaitong.png" alt="">
              <div class="grid-item-title">无货赔付</div>
              <div>商品问题致交易失败,补偿分销商 20 - 50 元</div>
            </div>

            <div class="grid-item">
              <img src="../../../../assets/img/shangjianum.png" alt="">
              <div class="grid-item-title">签署合同</div>
              <div>如有跑路虞都互联有权帮助立案起诉</div>
            </div>
            <div class="grid-item">
              <img src="../../../../assets/img/xiajianum.png" alt="">
              <div class="grid-item-title">二次回收</div>
              <div>30日内销售商品不低于八折回收</div>
            </div>

            <div class="grid-item">
              <img src="../../../../assets/img/jisushouh.png" alt="">
              <div class="grid-item-title">极速售后</div>
              <div>找回问题3日未处理,罚10元,超7日平台强退</div>
            </div>


            <div class="grid-item">
              <img src="../../../../assets/img/jiageyou.png" alt="">
              <div class="grid-item-title">价格优势</div>
              <div>货源价保全网最低,举报高价奖百元</div>
            </div>

            <div class="grid-item">
              <img src="../../../../assets/img/zhuanmai.png" alt="">
              <div class="grid-item-title">支持转手</div>
              <div>所有账号支持转手续保,续保费用不高于5%</div>
            </div>

          </div>
        </div>
      </div>

    </div>
    <!-- 优质商家 -->
    <div class="card youzhi-box">
      <div>
        <subtit title="优质商家">
          <img v-if="shopInfo&&shopInfo.isQuality == 2" style="    width: 60px;
            height: 24px;
            object-fit: contain;margin-left: 4px;" src="../../../../assets/img/youzhi.png" alt="">
          <el-button v-else style="margin-left: 15px;" type="primary" @click="openYouzhi">成为优质供货商</el-button>
        </subtit>
      </div>
      <!-- <div class="youshi">
        <img src="https://imgage.maimaihao.com/yuduhulian/erp/static/icon/youzhigonghuo.png" alt="">
      </div> -->
      <div class="youzhi-list flex">
        <div class="youzhi-item" v-for="(item, key) in paihangList" :key="key">
          <div class="name-tit-box flex alc">
            <img :src="item.avatar || 'https://imgage.maimaihao.com/yuduhulian/zanwu.png'" alt="">
            <div>
              <div class="name">
                {{ item.tenantName }}
              </div>
              <div class="flex tags">
                <span class="tag" v-if="item.marginState == 2">保证金商家</span>
                <span class="tag" v-if="item.rise != 10 && item.rise">提号 <span
                    style="font-size: 13px;color: #6C5DD3;">{{ item.rise || 10 }}</span>折</span>
                <span class="tag" v-if="item.authType!=1">合同已签署</span>
                <span class="tag" v-if="item.authType!=1">已实名</span>
              </div>
            </div>
          </div>
          <div class="game-box">
            <div>
              在售商品： <span class="shop-num">{{ item.count }}</span>
            </div>
            <div class="game-inner flex">
              <span style="white-space: nowrap;">经营游戏：</span>
              <div class="game-list flex">
                <span v-for="(game, index) in getDisplayGames(item.gameName)" :key="index"> {{ game }}</span>
                <span v-if="getMoreGamesCount(item.gameName) > 0" class="more">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">
                      <div class="gridList">
                        <div class="gridItem" v-for="value in getDisplayGamess(item.gameName)">{{ value }}</div>
                      </div>
                    </div>
                    <span> 查看更多</span>
                  </el-tooltip>

                </span>
              </div>
            </div>
          </div>
          <div class="btns">
            <el-button type="primary" plain @click="goGoods(item)">查看商品</el-button>
            <el-button type="primary" @click="qugouxuan">勾选TA</el-button>
            <el-button type="primary" @click="openIM(item)">联系客服</el-button>
          </div>
        </div>
      </div>

    </div>


    <!-- <div class="tab-inner wogouxuan-box" v-show="actived==2">
      <WoGouXuanDe ref="WoGouXuanDe"></WoGouXuanDe>
    </div> -->
    <!-- <div class="tab-inner" v-show="actived==3">
      <goodsPool ref="goodsPool"></goodsPool>
    </div> -->

    <!-- 加入优质商家需要的弹窗 -->
    <payBZJ @next="nextFn('3')" ref="payBZJ"></payBZJ>
    <authDialog @next="nextFn('2')" ref="authDialog"></authDialog>
    <joinYouzhi @next="nextFn('1')" ref="joinYouzhi"></joinYouzhi>
    <userInfoSure @next="nextFn('4')" ref="userInfoSure"></userInfoSure>
    <!-- 联系商家 -->
    <kefuList ref="kefuList"></kefuList>

    
    <comp8Dialog ref="comp8DialogRef"></comp8Dialog>
  </div>
</template>
<script>
import comp8Dialog from "@/views/indexComponents/comp8Dialog.vue";
import subtit from "@/components/indexComponents/subtit.vue";
import { getDaishouwode } from "@/api/gameConfig/goodsList";
import vueSeamlessScroll from "vue-seamless-scroll";
import { getPaihang, rankSale, rankSupply, v2Mutual, getMerchants } from "@/api/tenantApis/indexStatistics.js";
// 我勾选的
import WoGouXuanDe from "../../saleManage/goodsList/WoGouXuanDe.vue";
// 商家货源
import goodsPool from "../../goodsList/goodsPool.vue";

// 加入优质商家需要的弹窗
import payBZJ from "@/views/tenantPages/moneys/components/payBZJ.vue";
import authDialog from "../../shopManage/shopCenter/authDialog.vue";
import joinYouzhi from "./joinYouzhi.vue";
import userInfoSure from "@/views/tenantPages/components/userInfoSure";
import { cwyzsj } from "@/api/system/shopManage";
// 联系商家
import kefuList from "@/components/common/kefuList.vue";

export default {
  name: "Shangjiatihao",
  components: {
    subtit,
    vueSeamlessScroll,
    WoGouXuanDe,
    goodsPool,
    payBZJ,
    authDialog,
    joinYouzhi,
    userInfoSure,
    kefuList,comp8Dialog
    
  },
  data() {
    return {
      actived: 1,
      shop: {
        avatar: "",
        name: "商家名称",
        gameArr: ["王者荣耀", "和平精英"],
      },
      tabList: [
        {
          name: "商家提号",
          value: 1,
        },
        {
          name: "我勾选的",
          value: 2,
        },
        {
          name: "商家货源",
          value: 3,
        },
      ],
      defaultOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下，1向上，2向左，3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 0, // 单步运动停止的时间（默认值1000ms）
      },
      defaultOption2: {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下，1向上，2向左，3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 47, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 2000, // 单步运动停止的时间（默认值1000ms）
      },
      daishouwodeList: [],
      hutiData: {

      },
      tihaoPaihang: [

      ],
      gonghuoPaihang: [],
      refreshLoadingSale: false,
      refreshLoadingSupply: false,
      paihangList: [],
       defaultImage: require("@/assets/img/home/jindou2.png"),
    };
  },
  computed: {
    shopInfo() {
      return this.$store.getters.shopInfo;
    },

  },

  created() {
    this.getDaishouwode();
    this.getBZJ();

    this.getrankSale() // 分销排行榜
    this.getrankSupply()  //供货排行榜
    this.v2Mutual() //互提订单数据

    this.getMerchants() // 优质商家列表 
    // this.getPaihangList()
  },
  methods: {
    handleImageError(event) {
  event.target.src = this.defaultImage;
      // 控制不要一直跳动
      event.target.onerror = null;
    },
    async getrankSale() {
      this.refreshLoadingSale = true;
      const res = await rankSale()
      this.tihaoPaihang = res.data
      setTimeout(() => {
        this.refreshLoadingSale = false;
      }, 100); // 动画持续一会儿
    },
    async getrankSupply() {
      this.refreshLoadingSupply = true;
      const res = await rankSupply()
      const result = this.moveToNinthPosition(res.data, 101);

      this.gonghuoPaihang = result
      setTimeout(() => {
        this.refreshLoadingSupply = false;
      }, 100);
    },

    moveToNinthPosition(shops, targetId) {
    // 找到目标项
    const targetIndex = shops.findIndex(shop => shop.tenantId === targetId);
    if (targetIndex === -1) {
        return shops;
    }
    // 从原数组中移除目标项
    const [targetItem] = shops.splice(targetIndex, 1);
    // 将目标项插入到第9个位置（索引为8）
    if (shops.length >= 8) {
        shops.splice(8, 0, targetItem);
    } else {
        // 如果数组长度不足9，则放在最后
        shops.push(targetItem);
    }
    return shops;
},

    async v2Mutual() {
      const res = await v2Mutual()
      this.hutiData = res.data
    },
    async getMerchants() {
      const myTenantId = this.shopInfo&&this.shopInfo.tenantId;
      const res = await getMerchants()
      const rep = this.sortShops(res.data, myTenantId)
      this.paihangList = rep;
    },
    sortShops(shops, myId) {
    return shops.sort((a, b) => {
        if (a.tenantId === myId) return -1;
        if (b.tenantId === myId) return 1;
        return 0;
    });
},
    getDisplayGames(gameNames) {
      if (!gameNames) return [];
      const games = gameNames.split(',');
      return games.slice(0, 3);
    },
    getMoreGamesCount(gameNames) {
      if (!gameNames) return 0;
      const games = gameNames.split(',');
      return games.length > 3 ? games.length - 3 : 0;
    },
    getDisplayGamess(gameNames) {
      if (!gameNames) return [];
      const games = gameNames.split(',');
      return games;
    },
    getDaishouwode() {
      getDaishouwode().then((res) => {
        console.log("%c Line:65 🍤 res", "color:#f5ce50", res);
        if (res.data && res.data.length) {
          this.daishouwodeList = res.data;
        }
      });
    },
    // 跳转采购订单失败
    goPeifu() {
      this.$router.push({
        path: "/tenantOrders/caigoudingdan",
        query: {
          orderStatus: 2,
        },
      });
    },

    // 查看商家的商品列表
    goGoods(item) {
      const timer = new Date().getTime();
      this.$router.push({
        path: "/huoyuan/goodsPool",
        query: {
          timer: timer,
          tenantId: item.tenantId,
        },
      });
      // this.$nextTick(() => {
      //   this.$refs.goodsPool.searchByParams({
      //     tenantId: item.tenantId,
      //   });
      // });
    },

    // 联系客服
    openIM(row) {
      // 打开客服列表
      this.$refs.kefuList.open(row.tenantId, 1);
    },
    // 去勾选
    qugouxuan() {
      this.$router.push({
        path: "/ziyingshangcheng/page/config",
        query: {
          retailKey: 'zysc'
        }
      })
    },
    // 成为优质商家
    openYouzhi() {
      if (!this.shopInfo) {
        return this.$message.error("管理员不能使用该功能！");
      }
      this.$refs.joinYouzhi.open();
    },
    nextFn(step) {
      if (step != 1) {
        const loading = this.$loading("请稍后...");
        setTimeout(() => {
          this.checkTiaojianFn();
          loading.close();
        }, 1000);
      } else {
        this.checkTiaojianFn();
      }
    },
    checkTiaojianFn() {
      // 店铺实名  缴纳保证金 合同？
      if (
        this.shopInfo.authType &&
        (this.shopInfo.authType == 2 ||
          this.shopInfo.authType == 3 ||
          this.shopInfo.authType == 6)
      ) {
        // 已认证
        // 判断保证金
        if (this.shopInfo.marginState && this.shopInfo.marginState == 2) {
          // 已缴纳保证金
          if (this.shopInfo.marginMoney == this.BZJmoney) {
            // 保证金正常
            // 调用接口成为优质商家
            cwyzsj({
              tenantId: this.shopInfo.tenantId,
            })
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("已成为优质商家");
                  this.$store.dispatch("getShopInfo");
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              });
          } else {
            //保证金不足， 弹出缴纳保证金

            this.$alert("保证金不足，请缴纳保证金后再申请优质商家！");
            this.openPayBZJ();
          }
        } else {
          // 未缴纳保证金 弹出缴纳保证金

          this.$alert("未缴纳保证金，请缴纳保证金后再申请优质商家！");
          this.openPayBZJ();
        }
      } else {
        // 打开认证弹窗
        this.$alert("未实名认证，请先进行实名认证！");

        this.$refs.authDialog.open("joinYouzhi");
        // this.$message.error('未实名认证，请先进行实名认证！')
      }
    },
    // 获取保证金金额
    getBZJ() {
      this.getDicts("marginMoney").then((res) => {
        //console.log("%c Line:271 🥕 res", "color:#42b983", res);
        if (res.data && res.data.length) {
          this.BZJmoney = res.data[0].dictValue;
        }
      });
    },
    // 打开缴纳保证金的窗口
    openPayBZJ() {
      const money =
        Math.round((this.BZJmoney - this.shopInfo.marginMoney) * 100) / 100;
      this.$refs.payBZJ.open(money, this.BZJmoney || 0, "joinYouzhi");
    },

    goLink(val) {
      if (!val) {
        return;
      }
      const timestamp = new Date().getTime();
      this.$router.push({
        path: val,
        query: {
          timestamp,
        },
      });
    },

    openDialog() {
      this.$refs.comp8DialogRef.open()
    },
  
  },
};
</script>

<style scoped lang="scss">
.app-container {
  user-select: none;
  min-width: 1200px;
}

.tab-inner {
  height: calc(100vh - 160px);
  overflow: auto;
}

.tabs {
  margin-bottom: 0;
}

.card {
  padding:18px;
  background: #fff;
  border-radius: 10px;
  // margin-top: 20px;
  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
}

.daishou-list {
  width: 100%;
  padding-top: 10px;
  overflow: hidden;

  .scroll_box {
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    // column-gap: 15px;
  }

  .daishou-item {
    align-items: center;
    font-size: 16px;
    background-color: #f4f5fa;
    padding: 5px;
    border-radius: 8px;
    margin-right: 15px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 2px solid #fff;
      margin-right: 8px;
    }

    span {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.card2 {
  margin-top: 1px;
  column-gap: 15px;
  box-shadow: none;
  padding: 18px 4px;
  // padd
  .left {
    // width: 100%;
    // max-width: 1226px;
    flex: 1;

    .tihao-box {
      padding-left: 16px;

      >div {
        width: 50%;
        // height: 182px;
        // background-image: url('https://imgage.maimaihao.com/yuduhulian/erp/static/icon/tihaoliucheng.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
      }
    }

    .shangjiatihao {
      background-image: url("../../../../assets/img/youzhishangjia-bg.png");
        display: flex;
      flex-direction: column;
    }

    .peifushenqing {
      background-image: url("../../../../assets/img/youzhishangjia-bg.png");
      margin-left: 15px;
      display: flex;
      flex-direction: column;
    }

    .btn {
      // position: absolute;
      // bottom: 15px;
      // left: 30px;
      width: 88px;
      margin-left: 10px;
      margin-bottom: 15px;
    }
  }

  .rgbox {
    width: 348px;
    flex-shrink: 0;

    .flex {
      align-items: center;
      justify-content: space-between;
    }

    .timer {
      font-size: 12px;
      color: #666666;
    }

    .refreshImg {
      margin-left: 10px;
      cursor: pointer;
      font-size: 12px;
      color: #FA6400;

      img {
        width: 14px;
        margin-left: 4px;
        vertical-align: middle;
      }
    }
  }
}

.huti-tongji {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 4px;
  margin-top: 8px;

  .tit {
    color: #666;
    font-size: 16px;
  }

  .inner {
    justify-content: space-around;
    margin-top: 10px;
    padding-bottom: 4px;
  }

  .huti-item {
    cursor: pointer;
    text-align: center;
    color: #666;
    line-height: 1.1;

    .num {
      font-size: 24px;
      margin-right: 3px;
    }

    .name {
      color: #7981a5;
      margin-top: 8px;
    }

    i {
      // font-size: 16px;
      margin-left: 5px;
    }
  }
}

.rgbox {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 4px;
  padding-bottom: 10px;

  .tit {
    font-size: 18px;
    font-weight: 600;
  }

  .paihang_list {
    height: 444px;
    overflow: hidden;
    // margin-top: 10px;
  }

  .paihang_item {
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 0;

    .numimg,
    .icon {
      width: 24px;
      height: 24px;
    }

    .icon {
      border-radius: 4px;
      margin: 0 5px;
    }

    .name {
      font-size: 16px;
      width: 200px;
      overflow: hidden;
      height: 21px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lianxi {
      font-size: 14px;
      cursor: pointer;
      color: #6c5dd3;
    }
  }
}

.youzhi-box {
  .youshi {
    margin-top: 15px;

    img {
      width: 100%;
    }
  }
}

.youzhi-list {
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;

  .youzhi-item {
    width: 400px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 10px;
    background: #f9f9f9;
  }

  .name-tit-box {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .name {
      font-size: 16px;
    }

    .tags {
      flex-shrink: 0;
      column-gap: 10px;
      margin-top: 6px;

      .tag {
        color: #7882ad;
        background-color: #f5f7ff;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 11px;
        white-space: nowrap;
      }
    }
  }

  .game-box {

    background: #f8f8f8;
    border-radius: 4px;
    padding: 10px 6px;
    margin-top: 15px;

    .game-inner {
      margin-top: 5px;
    }

    .game-list {
      flex-wrap: wrap;
      gap: 10px;

      >span {
        width: 64px;
        height: 20px;
        background: #fff;
        border-radius: 4px;
        color: #555f7e;
        white-space: nowrap;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
      }

      .more {
        color: #6c5dd3;
        cursor: pointer;
      }
    }
  }

  .btns {
    text-align: center;
    margin-top: 2px;
  }
}

.shop-num {
  font-size: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 8px;
  margin-top: 26px;

  .grid-item {
    border: 1px solid #E3E6FB;
    border-radius: 6px;
    position: relative;
    padding: 26px 8px 8px;
    font-size: 12px;
    color: #666;

    .grid-item-title {
      text-align: center;
      margin-bottom: 6px;
      color: #333333;
      font-size: 14px;
    }

    img {

      position: absolute;
      width: 36px;
      height: 36px;
      top: -16px;
      left: 50%;
      margin-left: -17px;
    }
  }
}


.refreshImg .refresh-icon {
  transition: transform 0.3s;
}

.refreshImg.loading .refresh-icon {
  animation: rotate360 1s linear infinite;
}

@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}

.gridList {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-gap: 10px;
}

.flex-l-title {
  width: 134px;
  text-align: left;
  position: relative;
  color: #FFFFFF;
  font-size: 14px;
  padding-right: 10px;

  .flex-l-title-bg {
    width: 134px;
    position: absolute;
    left: -10px;
    top: 10px;
  }

  >div {
    padding-top: 12px;
    text-align: center;
    position: relative;
    z-index: 1;

  }

  .tips-img {
    width: 16px;
    vertical-align: middle;
  }

}

.flexbox {
  align-items: center;
  flex: 1;
  padding: 0 12px;
  justify-content: space-between;
  
}

.flex-l-cont-bg {
  width: 300px;
}

.flex-r-cont-bg {
  width: 100px;
  margin-left: 10px;
}
</style>
